What is the difference between :before and ::before? Why were pseudo-elements changed from one colon (:) to two (::) in CSS3?

Difference Between :before and ::before in CSS

In CSS, :before and ::before both target the same pseudo-element that allows content to be inserted before an element's actual content. The difference lies in the CSS specification: CSS3 introduced the double colon :: notation to clearly distinguish pseudo-elements from pseudo-classes, while : single colon syntax is retained for backward compatibility with older browsers.

Key Points

:before (single colon) is the legacy syntax from CSS2, still supported for backward compatibility.
::before (double colon) is the modern CSS3 syntax, recommended for clarity and standards compliance.
The double colon distinguishes pseudo-elements from pseudo-classes like :hover or :first-child.
Functionally, both :before and ::before behave the same way in modern browsers.

Example: Using ::before

In this example, the star is added before the paragraph text using ::before. Using :before would achieve the same visual result, but ::before is the recommended CSS3 syntax.

Best Practices

Prefer using ::before and ::after for clarity and compliance with CSS3 standards.
Use the content property to define what is inserted.
Test for backward compatibility if supporting older browsers that recognize only :before or :after.
Use pseudo-elements for decorative or structural styling without altering HTML content.

Question Loading...

Transformation and Transition

Frameworks

Everything else